<template>
	<div class="row" id="jychart1">
	</div>
</template>

<script>
	import * as echarts from "echarts"
	export default {
		name: "item",
		data() {
			return {

			}
		},
		mounted() {
			this.getInit()
		},
		methods: {
			getInit() {
				var mapChart = echarts.init(document.getElementById('jychart1'));
				let option = {
					legend: {
						show: false,
					},
					polar: {
						center: ["50%", "60%"],
						radius: "75%",
					},
					radar: [{
						indicator: [{
								text: "招标人",
								max: 100,
							},
							{
								text: "监督人员",
								max: 100,
							},
							{
								text: "评标专家",
								max: 100,
							},
							{
								text: "投标人",
								max: 100,
							},
							{
								text: "招标代理",
								max: 100,
							},
						],

						textStyle: {
							color: "red",
						},
						center: ["50%", "55%"],
						radius: '70%',
						startAngle: 90,
						splitNumber: 5,
						orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
						name: {
							formatter: "{value}",
							textStyle: {
								fontSize: 12, //外圈标签字体大小
								color: "#D7E7FF", //外圈标签字体颜色
							},
						},
						splitArea: {
							// 坐标轴在 grid 区域中的分隔区域，默认不显示。
							show: true,
							areaStyle: {
								// 分隔区域的样式设置。
								color: ["rgba(0, 133, 255, 0.1)", "rgba(0, 133, 255, 0.08)",
									"rgba(0, 133, 255, 0.06)", "rgba(0, 133, 255, 0.05)",
									"rgba(0, 133, 255, 0.03)"
								], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
							},
						},
						// axisLabel:{//展示刻度
						//     show: true
						// },
						axisLine: {
							show: false,
							//指向外圈文本的分隔线样式
							lineStyle: {
								color: "#153269",
							},
						},
						splitLine: {
							lineStyle: {
								color: "#113865", // 分隔线颜色
								width: 1, // 分隔线线宽
							},
						},
					}],
					angleAxis: {
						type: "category",
						minInterval: 1,
						boundaryGap: false,
						clockwise: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						startAngle: 45
					},
					radiusAxis: {
						min: 0,
						max: 100,
						interval: 20,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							//指向外圈文本的分隔线样式
							show: false,
							lineStyle: {
								color: "#5aa3d0",
							},
						},
						axisLabel: {
							fontSize: 10,
							color: "rgba(255, 255, 255, .4)",
							align: "center",
							showMinLabel: false,
							formatter: '{value}%',
							rotate: -40
						},
					},
					series: [{
						name: "本月交易主体行为合规率",
						type: "radar",
						color: ["#00AA8D"],
						data: [{
							name: "",
							value: [100, 100, 98, 96, 97],
							areaStyle: {
								normal: {
									// 单项区域填充样式
									color: 'rgba(0, 170, 255, 0.58)'
								}
							},
							symbolSize: 5,
							label: {
								// 单个拐点文本的样式设置
								normal: {
									show: true, // 单个拐点文本的样式设置。[ default: false ]
									position: "top", // 标签的位置。[ default: top ]
									color: "#00F0FF", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
									fontSize: 12, // 文字的字体大小
									formatter: function(params) {
										return params.value;
									},
								},
							},
							itemStyle: {
								normal: {
									//图形悬浮效果
									borderColor: "#FFFFFF",
									borderWidth: 1,
								},
							},
							lineStyle: {
								normal: {
									width: 1,
									color: "#00C2FF"
								}
							}
						}]
					}]
				}
				mapChart.setOption(option, true)

				window.addEventListener('resize', () => {
					mapChart.resize();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.row {
		height: 100%;
	}
</style>
